﻿{extend name="public:base" /}

{block name="css"}
<link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css"/>
<link rel="stylesheet" type="text/css" href="__ADMIN__/css/style.css">
<style>
    .set-font {
        font-size: 18px;
        font-weight: bold;
    }

    .message-box {
        display: flex;
        padding: 0;
        flex-wrap: wrap;
    }

    .message-box .message-box-item {
        display: flex;
        align-items: center;
        width: 33%;
        margin-bottom: 20px;
    }


    .message-box .input {
        max-width: 58%;
    }

    .message-box .message-box-item .title {
        min-width: 100px;
        white-space: nowrap;
    }

    .two_select_box {
        width: 59%;
        display: flex;
        justify-content: space-between;
    }

    .layui-form {
        margin-right: 10px;
    }

    .layui-form:last-child {
        margin-right: 0;
    }

</style>{/block}

{block name="content"}

<div class="wrapper wrapper-content animated fadeInRight">
    <form method="post" class="row">
        <div class="ibox col-lg-12">
            <div class="ibox-content">
                <div class="set-font">基本信息</div>
                <div class="hr-line-dashed"></div>
                <div class="box-item">
                    <div class="form-group row">
                        <div class="col-sm-6">
                            <input type="file" id="img_file" accept="image/*" style="display: none">
                            <input type="hidden" class="hidden_value" name="avatar" id="img" value="{$info['avatar']|default=''}"/>
                            <div class="btn btn-w-m btn-primary" onclick="uploadImage('img_file', 'img', 'form-uploaded-box-single', false, 1)">头像原图上传</div>
                            <div class="btn btn-w-m btn-primary" onclick="openCrop('form-uploaded-box-single', 1)">头像裁剪上传</div>

                            <div class="form-uploaded-box" id="form-uploaded-box-single" style="width: 140px">
                                {if $info.avatar}
                                <div class="form-uploaded-img-box">
                                    <img class="form-uploaded-box-img" src="{:getPicture($info.avatar)}" data-id="{$info.avatar}">
                                    <i class="form-uploaded-img-preview iconfont icon-yulan" onclick="previewImg(this, 'form-uploaded-img-preview')"></i>
                                    <i class="form-uploaded-img-del iconfont icon-close" onclick="delImage(this, 'cropper_uploaded_img_ids', 'cropper_uploaded_img_paths', 'form-')"></i>
                                </div>
                                {/if}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="message-box col-sm-8">
                    <div class="message-box-item">
                        <span class="title">姓名</span>
                        <input type="text" class="form-control input" name="username" placeholder="请输入姓名" value="{$info.username}">
                    </div>
                    <div class="message-box-item">
                        <span class="title">性别</span>
                        <div class="layui-form">
                            <input type="radio" name="gender" value="男" title="男" {$info.gender !='女' ? 'checked' : ''}>
                            <input type="radio" name="gender" value="女" title="女" {$info.gender== '女' ? 'checked' : ''}>
                        </div>
                    </div>
                    <div class="message-box-item">
                        <span class="title">出生日期</span>
                        <input placeholder="请选择出生日期" name="birth_date" value="{$info.birth_date}" type="text" class="form-control input form-control-lg birth_date" readonly>
                    </div>
                    <div class="message-box-item">
                        <span class="title">身高</span>
                        <div class="layui-form">
                            <select name="height">
                                <option value="">请选择</option>
                                {for start="140" end="201" step="1" name="i"}
                                <option value="{$i}cm" {$info.height== $i ?
                                'selected' : ''}>{$i}cm</option>
                                {/for}
                            </select>
                        </div>
                    </div>
                    <div class="message-box-item">
                        <span class="title">体重</span>
                        <div class="layui-form">
                            <select name="weight">
                                <option value="">请选择</option>
                                {for start="40" end="101" step="1" name="i"}
                                <option value="{$i}kg" {$info.weight== $i ?
                                'selected' : ''}>{$i}kg</option>
                                {/for}
                            </select>
                        </div>
                    </div>
                    <div class="message-box-item">
                        <span class="title">职业</span>
                        <div class="layui-form">
                            <select name="occupation">
                                <option value="">请选择</option>
                                {volist name=":C('OCCUPATION')" id="vo"}
                                <option value="{$vo}" {$info.occupation== $vo ?
                                'selected' : ''}>{$vo}</option>
                                {/volist}
                            </select>
                        </div>
                    </div>
                    <div class="message-box-item">
                        <span class="title">体型</span>
                        <div class="layui-form">
                            <select name="body_type">
                                <option value="">请选择</option>
                                {volist name=":C('BODY_TYPE')" id="vo"}
                                <option value="{$vo}" {$info.body_type== $vo ?
                                'selected' : ''}>{$vo}</option>
                                {/volist}
                            </select>
                        </div>
                    </div>
                    <div class="message-box-item">
                        <span class="title">推荐</span>
                        <div class="layui-form">
                            <input type="radio" name="is_recommend" value="1" title="是" {$info.is_recommend != 2 ? 'checked' : ''}>
                            <input type="radio" name="is_recommend" value="2" title="否" {$info.is_recommend == 2 ? 'checked' : ''}>
                        </div>
                    </div>
                    <div class="message-box-item">
                        <span class="title">角色</span>
                        <div class="layui-form">
                            <select name="role_id">
                                {volist name="$role_list" id="vo"}
                                <option value="{$vo.id}" {$info.role_id== $vo.id ? 'selected' : ''}>{$vo.name}</option>
                                {/volist}
                            </select>
                        </div>
                    </div>
                </div>
                <div class="message-box col-sm-8">
                    <div class="message-box-item col-sm-9" style="padding: 0">
                        <span class="title">居住地</span>
                        <div class="layui-form">
                            <select class="jz_province" name="residence[]" lay-filter="jz_province">
                                <option value="">请选择</option>
                                {volist name="$region_list" id="vo"}
                                <option value="{$vo.name}">{$vo.name}</option>
                                {/volist}
                            </select>
                        </div>
                        <div class="layui-form">
                            <select class="jz_city" name="residence[]" lay-filter="jz_city"></select>
                        </div>
                        <!--<div class="layui-form">
                            <select class="jz_area" name="jz_area" lay-filter="jz_area"></select>
                        </div>-->
                    </div>
                </div>
                <div class="message-box col-sm-8">
                    <div class="message-box-item col-sm-9" style="padding: 0">
                        <span class="title">户籍地</span>
                        <div class="layui-form">
                            <select class="hk_province" name="hukou[]" lay-filter="hk_province">
                                <option value="">请选择</option>
                                {volist name="$region_list" id="vo"}
                                <option value="{$vo.name}">{$vo.name}</option>
                                {/volist}
                            </select>
                        </div>
                        <div class="layui-form">
                            <select class="hk_city" name="hukou[]" lay-filter="hk_city"></select>
                        </div>
                        <!--<div class="layui-form">
                            <select class="hk_area" name="hk_area" lay-filter="hk_area"></select>
                        </div>-->
                    </div>
                </div>

                <div class="hr-line-dashed"></div>
                <div class="set-font">详细信息</div>
                <div class="hr-line-dashed"></div>

                <div class="message-box col-sm-8">
                    <div class="message-box-item">
                        <span class="title">婚况</span>
                        <div class="layui-form">
                            <select name="marital_status">
                                <option value="">请选择</option>
                                {volist name=":C('MARITAL_STATUS')" id="vo"}
                                <option value="{$vo}" {$info.marital_status== $vo ?
                                'selected' : ''}>{$vo}</option>
                                {/volist}
                            </select>
                        </div>
                    </div>
                    <div class="message-box-item">
                        <span class="title">学历</span>
                        <div class="layui-form">
                            <select name="education_level">
                                <option value="">请选择</option>
                                {volist name=":C('EDUCATION_LEVEL')" id="vo"}
                                <option value="{$vo}" {$info.education_level== $vo ?
                                'selected' : ''}>{$vo}</option>
                                {/volist}
                            </select>
                        </div>
                    </div>
                    <div class="message-box-item">
                        <span class="title">公司性质</span>
                        <div class="layui-form">
                            <select name="company_type">
                                <option value="">请选择</option>
                                {volist name=":C('COMPANY_TYPE')" id="vo"}
                                <option value="{$vo}" {$info.company_type== $vo ?
                                'selected' : ''}>{$vo}</option>
                                {/volist}
                            </select>
                        </div>
                    </div>
                    <div class="message-box-item">
                        <span class="title">年收入</span>
                        <div class="layui-form">
                            <select name="annual_income">
                                <option value="">请选择</option>
                                {volist name=":C('ANNUAL_INCOME')" id="vo"}
                                <option value="{$vo}" {$info.annual_income== $vo ?
                                'selected' : ''}>{$vo}</option>
                                {/volist}
                            </select>
                        </div>
                    </div>
                    <div class="message-box-item">
                        <span class="title">住房</span>
                        <div class="layui-form">
                            <select name="housing_status">
                                <option value="">请选择</option>
                                {volist name=":C('HOUSING_STATUS')" id="vo"}
                                <option value="{$vo}" {$info.housing_status== $vo ?
                                'selected' : ''}>{$vo}</option>
                                {/volist}
                            </select>
                        </div>
                    </div>
                    <div class="message-box-item">
                        <span class="title">车辆</span>
                        <div class="layui-form">
                            <select name="car_status">
                                <option value="">请选择</option>
                                {volist name=":C('CAR_STATUS')" id="vo"}
                                <option value="{$vo}" {$info.car_status== $vo ?
                                'selected' : ''}>{$vo}</option>
                                {/volist}
                            </select>
                        </div>
                    </div>
                    <div class="message-box-item col-sm-12" style="padding: 0">
                        <span class="title">兴趣爱好</span>
                        <div class="layui-form ">
                            {volist name="hobby_arr" id="vo"}
                            <input type="checkbox" name="hobby[]" value="{$vo}" title="{$vo}" {:in_array($vo, $info.hobby) ? 'checked' : ''}>
                            {/volist}
                        </div>
                    </div>
                </div>

                <div class="hr-line-dashed"></div>
                <div class="set-font">联系方式</div>
                <div class="hr-line-dashed"></div>

                <div class="message-box">
                    <div class="message-box-item">
                        <span class="title">手机号</span>
                        <input type="text" class="form-control input" name="mobile" placeholder="请输入手机号" value="{$info.mobile}">
                    </div>
                    <div class="message-box-item">
                        <span class="title">微信号</span>
                        <input type="text" class="form-control input" name="wechat" placeholder="请输入微信号" value="{$info.wechat}">
                    </div>
                    <div class="message-box-item">
                        <span class="title">QQ号</span>
                        <input type="text" class="form-control input" name="qq" placeholder="请输入QQ号" value="{$info.qq}">
                    </div>
                </div>

                <div class="hr-line-dashed"></div>
                <div class="set-font">相册管理</div>
                <div class="hr-line-dashed"></div>

                <div class="box-item">
                    <div class="col-sm-6" style="padding: 0">
                        <input type="file" id="imgs_file" multiple style="display: none">
                        <input type="hidden" class="hidden_value" name="photos" id="imgs" value="{$info['photos']|default=''}"/>
                        <div class="btn btn-w-m btn-primary" onclick="uploadImage('imgs_file', 'imgs', 'form-uploaded-box-imgs', false, 5)">原图上传</div>
                        <div class="btn btn-w-m btn-primary" onclick="openCrop('form-uploaded-box-imgs', 5)">裁剪上传</div>

                        <div class="form-uploaded-box" id="form-uploaded-box-imgs">
                            {volist name="info.photos_arr" id="vo"}
                            <div class="form-uploaded-img-box">
                                <img class="form-uploaded-box-img" src="{$vo.path}" data-id="{$vo.id}">
                                <i class="form-uploaded-img-preview iconfont icon-yulan" onclick="previewImg(this, 'form-uploaded-img-preview', 'form-uploaded-box-imgs')"></i>
                                <i class="form-uploaded-img-del iconfont icon-close" onclick="delImage(this, 'cropper_uploaded_img_ids', 'cropper_uploaded_img_paths', 'form-')"></i>
                            </div>
                            {/volist}
                        </div>
                    </div>
                </div>

                <div class="hr-line-dashed"></div>
                <div class="set-font">择偶要求</div>
                <div class="hr-line-dashed"></div>

                <div class="message-box col-sm-8">
                    <div class="message-box-item">
                        <span class="title">年龄</span>
                        <div class="two_select_box">
                            <div class="layui-form select">
                                <select name="requirement_age[]">
                                    <option value="">请选择</option>
                                    {for start="18" end="71" step="1" name="i"}
                                    <option value="{$i}岁" {$info.requirement_age[0]== $i ? 'selected' : ''}>{$i}岁</option>
                                    {/for}
                                </select>
                            </div>
                            <div class="layui-form select">
                                <select name="requirement_age[]">
                                    <option value="">请选择</option>
                                    {for start="18" end="71" step="1" name="i"}
                                    <option value="{$i}岁" {$info.requirement_age[1]== $i ? 'selected' : ''}>{$i}岁</option>
                                    {/for}
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="message-box-item">
                        <span class="title">身高</span>
                        <div class="two_select_box">
                            <div class="layui-form select">
                                <select name="requirement_height[]">
                                    <option value="">请选择</option>
                                    {for start="140" end="201" step="1" name="i"}
                                    <option value="{$i}cm" {$info.requirement_height[0]== $i ?
                                    'selected' : ''}>{$i}cm</option>
                                    {/for}
                                </select>
                            </div>
                            <div class="layui-form select">
                                <select name="requirement_height[]">
                                    <option value="">请选择</option>
                                    {for start="140" end="201" step="1" name="i"}
                                    <option value="{$i}cm" {$info.requirement_height[1]== $i ?
                                    'selected' : ''}>{$i}cm</option>
                                    {/for}
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="message-box-item">
                        <span class="title">体型</span>
                        <div class="layui-form">
                            <select name="requirement_body_type">
                                <option value="">请选择</option>
                                {volist name=":C('BODY_TYPE')" id="vo"}
                                <option value="{$vo}" {$info.requirement_body_type== $vo ?
                                'selected' : ''}>{$vo}</option>
                                {/volist}
                            </select>
                        </div>
                    </div>
                    <div class="message-box-item">
                        <span class="title">婚姻状况</span>
                        <div class="layui-form">
                            <select name="requirement_marital_status">
                                <option value="">请选择</option>
                                {volist name=":C('MARITAL_STATUS')" id="vo"}
                                <option value="{$vo}" {$info.requirement_marital_status== $vo ?
                                'selected' : ''}>{$vo}</option>
                                {/volist}
                            </select>
                        </div>
                    </div>
                    <div class="message-box-item">
                        <span class="title">学历</span>
                        <div class="layui-form">
                            <select name="requirement_education_level">
                                <option value="">请选择</option>
                                {volist name=":C('EDUCATION_LEVEL')" id="vo"}
                                <option value="{$vo}" {$info.requirement_education_level== $vo ?
                                'selected' : ''}>{$vo}</option>
                                {/volist}
                            </select>
                        </div>
                    </div>
                    <div class="message-box-item">
                        <span class="title">年收入</span>
                        <div class="layui-form select">
                            <select name="requirement_annual_income">
                                <option value="">请选择</option>
                                {volist name=":C('ANNUAL_INCOME')" id="vo"}
                                <option value="{$vo}" {$info.requirement_annual_income== $vo ?
                                'selected' : ''}>{$vo}</option>
                                {/volist}
                            </select>
                        </div>
                    </div>
                    <div class="message-box-item">
                        <span class="title">小孩</span>
                        <div class="layui-form">
                            <select name="requirement_has_children">
                                <option value="无" {$info.requirement_has_children==
                                '无' ? 'selected' : ''}>无</option>
                                <option value="有" {$info.requirement_has_children==
                                '有' ? 'selected' : ''}>有</option>
                            </select>
                        </div>
                    </div>
                    <div class="message-box-item">
                        <span class="title">购房</span>
                        <div class="layui-form">
                            <select name="requirement_buying_status">
                                <option value="">请选择</option>
                                {volist name=":C('HOUSING_STATUS')" id="vo"}
                                <option value="{$vo}" {$info.requirement_buying_status== $vo ?
                                'selected' : ''}>{$vo}</option>
                                {/volist}
                            </select>
                        </div>
                    </div>
                    <div class="message-box-item">
                        <span class="title">购车</span>
                        <div class="layui-form">
                            <select name="requirement_car_status">
                                <option value="">请选择</option>
                                {volist name=":C('CAR_STATUS')" id="vo"}
                                <option value="{$vo}" {$info.requirement_car_status== $vo ?
                                'selected' : ''}>{$vo}</option>
                                {/volist}
                            </select>
                        </div>
                    </div>
                </div>
                <div class="message-box col-sm-8">
                    <div class="message-box-item col-sm-9" style="padding: 0">
                        <span class="title">居住地</span>
                        <div class="layui-form">
                            <select class="yq_province" name="requirement_residence[]" lay-filter="yq_province">
                                <option value="">请选择</option>
                                {volist name="$region_list" id="vo"}
                                <option value="{$vo.name}">{$vo.name}</option>
                                {/volist}
                            </select>
                        </div>
                        <div class="layui-form">
                            <select class="yq_city" name="requirement_residence[]" lay-filter="yq_city"></select>
                        </div>
                        <!--<div class="layui-form">
                            <select class="yq_area" name="yq_area" lay-filter="yq_area"></select>
                        </div>-->
                    </div>
                </div>

                <div class="hr-line-dashed"></div>
                <div class="set-font">标签设置</div>
                <div class="hr-line-dashed"></div>

                <div class="message-box">
                    <div class="message-box-item">
                        <label class="title">标签</label>
                        <div class="layui-form">
                            {volist name="msg_tags" id="vo"}
                            <input type="checkbox" name="msg_tags[]" value="{$vo}" title="{$vo}" {:in_array($vo, $info.msg_tags) ? 'checked' : ''}>
                            {/volist}
                        </div>
                    </div>
                </div>

                <div class="hr-line-dashed"></div>
                <div class="set-font">认证审核</div>
                <div class="hr-line-dashed"></div>

                <div class="message-box">
                    <div class="message-box-item">
                        <span class="title">认证状态</span>
                        <div class="layui-form">
                            <input type="radio" name="rz_status" value="0" title="未认证" {$info.rz_status !=1 ? 'checked' : ''}>
                            <input type="radio" name="rz_status" value="1" title="已认证" {$info.rz_status== 1 ? 'checked' : ''}>
                        </div>
                    </div>
                </div>

                <input type="hidden" name="id" value="{:input('id')}">

                <div class="hr-line-dashed"></div>
                <div class="form-group row">
                    <div class="col-sm-4 col-sm-offset-2">
                        <button type="button" class="btn btn-w-m btn-default back-page">返回</button>
                        <button type="button" class="btn btn-w-m btn-primary ajax-post">提交</button>
                    </div>
                </div>
            </div>

        </div>
    </form>
</div>{include file="public/cropper-img-mask" cropper_uploaded_img_ids="cropper_uploaded_img_ids" cropper_uploaded_img_paths="cropper_uploaded_img_paths" crop_preview_box="crop-preview-box" /}

{include file="public/preview-img-mask" swiper-id="cropper-preview" /}

{/block}

{block name='js'}
<script src="/static/laydate/laydate.js"></script>
<script src="__STATIC__/layui/layui.js"></script>
<script>
    laydate.render({
        elem: '.birth_date' //指定元素
    });
</script>
<script>
    var id = `{:input('id')}`;
    var region_list = {$region_list_json};
    // 居住地回显数据
    var residence_arr = {$residence_arr};
    var jz_province = residence_arr[0] ? residence_arr[0] : '';
    var jz_city = residence_arr[1] ? residence_arr[1] : '';
    var jz_area = residence_arr[2] ? residence_arr[2] : '';
    // 户籍地回显数据
    var hukou_arr = {$hukou_arr};
    var hk_province = hukou_arr[0] ? hukou_arr[0] : '';
    var hk_city = hukou_arr[1] ? hukou_arr[1] : '';
    var hk_area = hukou_arr[2] ? hukou_arr[2] : '';
    // 户籍地回显数据
    var requirement_residence_arr = {$requirement_residence_arr};
    var yq_province = requirement_residence_arr[0] ? requirement_residence_arr[0] : '';
    var yq_city = requirement_residence_arr[1] ? requirement_residence_arr[1] : '';
    var yq_area = requirement_residence_arr[2] ? requirement_residence_arr[2] : '';

    layui.use('form', function () {
        var form = layui.form;

        if (id > 0) {
            // 初始化居住地
            $('.jz_province').val(jz_province).change();
            changeProvince(jz_province, 'jz_');
            changeCity(jz_city, 'jz_');
            form.render('select');
            // 初始化户籍地
            $('.hk_province').val(hk_province).change();
            changeProvince(hk_province, 'hk_');
            changeCity(hk_city, 'hk_');
            form.render('select');
            // 初始化要求居住地
            $('.yq_province').val(yq_province).change();
            changeProvince(yq_province, 'yq_');
            changeCity(yq_city, 'yq_');
            form.render('select');
        }

        form.on('select(jz_province)', function (data) {
            var name = data.value;
            changeProvince(name, 'jz_');
            form.render('select');
        });

        form.on('select(jz_city)', function (data) {
            var name = data.value;
            changeCity(name, 'jz_');
            form.render('select');
        });

        form.on('select(hk_province)', function (data) {
            var name = data.value;
            changeProvince(name, 'hk_');
            form.render('select');
        });

        form.on('select(hk_city)', function (data) {
            var name = data.value;
            changeCity(name, 'hk_');
            form.render('select');
        });

        form.on('select(yq_province)', function (data) {
            var name = data.value;
            changeProvince(name, 'yq_');
            form.render('select');
        });

        form.on('select(yq_city)', function (data) {
            var name = data.value;
            changeCity(name, 'yq_');
            form.render('select');
        });
    });

    function changeProvince(name, fix = 'jz_') {
        if (name != 0) {
            var name_arr = name.split("-");
            for (let i in region_list) {
                selected = name == region_list[i].name ? 'selected' : '';
                if (name_arr[0] == region_list[i].name) {
                    city_list = region_list[i].city_list;
                    break;
                }
            }
            renderOption(city_list, fix + 'city', fix, window[fix + 'city']);
        } else {
            $('.' + fix + 'city').html('<option value="">请选择</option>');
            $('.' + fix + 'area').html('<option value="">请选择</option>');
        }
    }

    function changeCity(name, fix = 'jz_') {
        if (name != 0) {
            for (let i in city_list) {
                if (name == city_list[i].name) {
                    var area_list = city_list[i].area_list;
                    break;
                }
            }
            renderOption(area_list, fix + 'area', fix, window[fix + 'area']);
        } else {
            $('.' + fix + 'area').html('<option value="">请选择</option>');
        }
    }

    function renderOption(region_list, class_name, fix = 'jz_', name = '') {
        if (class_name == fix + 'city') {
            $('.' + fix + 'city').html('<option value="">请选择</option>');
            $('.' + fix + 'area').html('<option value="">请选择</option>');
        }

        var option = '<option value="">请选择</option>';
        var selected = '';
        for (let i in region_list) {
            selected = name == region_list[i].name ? 'selected' : '';
            option += '<option ' + selected + ' value="' + region_list[i].name + '">' + region_list[i].name + '</option>';
        }
        $('.' + class_name).html(option);
    }
</script>

{/block}
